<script setup>
import {ref, version} from 'vue'
import One from './components/One.vue'
import Two from './components/Two.vue'
import Three from './components/Three.vue'
import User from './components/User.vue'

const currtab = ref('Two')
const tabs = {
  One, User, Two, Three
}
const ks = ['One','User','Two','Three']
currtab.value = ks[Math.round(Math.random()*(ks.length-1))]
</script>

<template>
  <h3>hello {{ version }}</h3>

  <button :class="{active:currtab===key}" :key="key" v-for="(item,key) in tabs" @click="currtab=key">{{ key }}</button>
  <hr>
  <KeepAlive include="One,Two">
    <component :is="tabs[currtab]"></component>
  </KeepAlive>
</template>

<style scoped>
.active {
  background-color: #f00;
  color: #fff;
}

button:first-of-type {
  border-top-left-radius: 3px;
}

button:last-of-type {
  border-top-right-radius: 3px;
}

button {
  padding: 6px 10px;
  border: 1px solid #ccc;
  cursor: pointer;
  background: #f0f0f0;
  margin-bottom: -1px;
  margin-right: -1px;
}
</style>
